<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .Pms_primary_plain_btn_active {
        color: #053dc8 !important;
        border: 1px solid #053dc8 !important;
        z-index: 1;
    }

    .el-button--small {
        /* 主要朴素按钮字体大小 */
        font-size: 14px;
        padding: 8px 15px;
    }

    .el-button.is-plain:focus,
    .el-button.is-plain:hover {
        background: #FFF;
        border-color: #053dc8;
        color: #053dc8;
    }

    /* elementui表格优化 */
    .el-table__row .el-table__cell,
    .el-table__row .el-table__cell .cell {
        padding: 0 !important;
    }

    #roomType .hover-row td {
        transition: 0s !important;
        background: transparent;
    }

    .highline-cell {
        border: 1px solid #053dc8 !important;
        background-color: white !important;
        z-index: 999 !important;
        cursor: pointer;
    }

    #xAxis {
        position: absolute;
        width: 0;
        background-color: rgba(103, 133, 209, 0.1);
        z-index: 990;
        pointer-events: none;
    }

    #yAxis {
        position: absolute;
        height: 0;
        background-color: rgba(103, 133, 209, 0.1);
        z-index: 999;
        pointer-events: none;
    }

    .week-price-data {
        display: none;
    }



    .week-gutes-data {
        color: black;
        margin: 2px;
        position: absolute;
        width: 0;
        z-index: 1;
        top: 0;
        left: 0;
        padding: 2px 2.5px 2px 2px;
    }

    .week-gutes-data>div {
        padding: 5px;
    }

    /* 预订框样式 */
    .BookRoom {
        width: 100%;
        height: 48px;
        z-index: 999;
        position: absolute;
        padding: 3px;
        top: 0;
        left: 0;
        cursor: pointer;
    }

    .BookRoom-content i {
        font-size: 34px;
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .BookRoom-content {
        width: 100%;
        height: 100%;
        background-color: rgb(179, 200, 255);
    }

    /* 优化elementui表格 */
    #roomType {
        user-select: none;
        border-collapse: collapse;
    }

    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        border: 1px solid #EBEEF5;
    }

    .el-table__header-wrapper th {
        z-index: 991;
    }

    .el-table__fixed-header-wrapper {
        z-index: 999;
    }

    .el-table__fixed {
        z-index: 1000;
    }
</style>

<body class="bgc-f2">
    <div id="app" class="main-container h-full" v-cloak>
        <!-- 顶部导航栏 -->
        <div class="grad-table" id="selectContainer" style="height:100%;">
            <div class="pl-17 pr-16 pt-17 pb-16">
                <el-button-group class=" m">
                    <el-button size="small" plain class="Pms_primary_plain_btn_active">日历</el-button>
                    <el-button size="small" plain>单日</el-button>
                    <el-button size="small" plain>渠道</el-button>
                </el-button-group>
            </div>
            <div class="pl-17 pb-6 ovh" style="height:calc(100% - 65px)" id="container">
                <div id="xAxis"></div>
                <div id="yAxis"></div>
                <el-table :data="tableData" border style="width: 100%" height="100%" ref="elTable"
                    :header-cell-style="headerCellStyle" :row-style="{height: '52px'}" :span-method="objectSpanMethod"
                    @cell-mouse-enter="cellMouseEnterMethod" @cell-mouse-leave="cellMouseLeaveMethod" id="roomType"
                    :cell-class-name="cellClassNameMethod">
                    <!-- 左边日期、筛选、收起列 -->
                    <el-table-column fixed width="186" header-align="center">
                        <!-- 选择日期 -->
                        <template slot="header" slot-scope="scope">
                            <div class="cup">
                                <div class="ub ub-ac ub-pc tx-bl" @click="$refs.dateTool.focus()">
                                    <i class="el-icon-arrow-left"></i>
                                    <div class="ml-5 mr-5">{{dateVal}}</div>
                                    <i class="el-icon-arrow-right"></i>
                                </div>
                                <div style="height: 0;overflow: hidden;position: absolute;top:00px;left:100px">
                                    <el-date-picker v-model="dateVal" type="date" placeholder="选择日期"
                                        value-format="yyyy-MM-dd" ref="dateTool">
                                    </el-date-picker>
                                    </el-date-picker>
                                </div>
                            </div>
                        </template>
                        <!-- 筛选工具 -->
                        <el-table-column prop="roomTypeName" width="98" header-align="center" align="center">
                            <template slot="header" slot-scope="scope">
                                <div class="tx-33">筛选<i class="el-icon-s-operation ml-5"></i></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="roomName" width="88" header-align="center" align="center">
                            <template slot="header" slot-scope="scope">
                                <div class="tx-33">收起<i class="el-icon-arrow-up ml-5"></i></div>
                            </template>
                        </el-table-column>

                    </el-table-column>
                    <!-- 每日日期和剩余间数 -->
                    <el-table-column v-for="(item,index) in timeThArr" :key="index" width="97" header-align="center">
                        <!-- 每日日期 -->
                        <template slot="header" slot-scope="scope">
                            <div>
                                <span v-if="WebUtil.judgeTime(item.date)" class="tx-bl">
                                    今天
                                    <span class="ml-3">{{WebUtil.getWeek(item.date)}}</span>
                                </span>
                                <span v-else>
                                    <span v-if="WebUtil.getWeek(item.date) == '五' || WebUtil.getWeek(item.date) == '六'"
                                        class="tx-re">
                                        {{item.date.substring(5,item.length)}}
                                        <span class="ml-3">{{WebUtil.getWeek(item.date)}}</span>
                                    </span>
                                    <span v-else>
                                        <span class="tx-33">{{item.date.substring(5,item.date.length)}}</span>
                                        <span class="ml-3 tx-99">{{WebUtil.getWeek(item.date)}}</span>
                                    </span>
                                </span>
                            </div>
                        </template>
                        <!-- 剩余间数 -->
                        <el-table-column width="97" header-align="center">
                            <template slot="header" slot-scope="scope">
                                <span class="tx-12 tx-99">
                                    剩余{{item.surplus || 0}}间
                                </span>
                            </template>
                            <template slot-scope="scope">

                                <div style="height:52px;">
                                    <div class="tx-l tx-99 tx-12 pt-5 pl-5 pr-5 pb-5 cup book-td" style="height: 52px;">
                                        <div class="week-price-data  book-td">
                                            <p class="le-14  book-td">{{scope.row[item.date].price.roomTypeName}}</p>
                                            <p class="le-14  book-td">{{scope.row[item.date].price.roomName}}</p>
                                            <p class="ub ub-ac le-14  book-td"><span style="margin-left: -3px;"
                                                    class="book-td" v-if="scope.row[item.date].price.roomPrice">￥</span>
                                                <span style="margin-left: -3px;"
                                                    class="book-td">{{scope.row[item.date].price.roomPrice}}</span>
                                            </p>
                                        </div>
                                    </div>

                                </div>

                            </template>
                        </el-table-column>

                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- <template v-for="(item,index) in timeThArr">
            <div class="tx-l pl-7 pr-3 pt-2 pb-5 cup tx-12 week-gutes-data"
                :class="'date-'+item.date+' roomId-'+row.roomId" v-for="(row, index) in tableData" :key="index"
                v-if="row[item.date].guest && row[item.date].guest.roomId">
                <div class="ub ub-ac ub-sb">
                    <p class="le-14">{{row[item.date].guest.guestNmae}}</p>
                    <div v-if="row[item.date].guest.payStatus == 1"
                        style="width: 21px;height: 21px;transform: scale(0.7);" class="tx-c bgc-re tx-wh">
                        欠
                    </div>
                </div>
                <p class="le-14 mt-3">●{{row[item.date].guest.otaType}}</p>
            </div>
        </template> -->
    </div>
    <script src="https://lib.baomitu.com/underscore.js/1.11.0/underscore-min.js"></script>
    <script type="text/babel">
        new Vue({
            el: '#app',
            data: {
                value: "",
                xAxisTop: 0,
                yAxisLeft: 0,
                dateVal: WebUtil.initTimeStr(new Date().getTime(), "day"),//默认日期
                timeThArr: [],
                tableData: [],
                roomEnum: [
                    {
                        roomTypeName: "雅致双床房",
                        roomTypeId: 1,
                        roomList: [
                            { roomId: 1, roomName: "248" },
                            { roomId: 2, roomName: "249" },
                            { roomId: 3, roomName: "250" },
                            { roomId: 4, roomName: "251" },
                            { roomId: 5, roomName: "252" },
                            { roomId: 6, roomName: "253" },
                            { roomId: 7, roomName: "254" },
                        ]
                    },
                    {
                        roomTypeName: "普通大床房",
                        roomTypeId: 2,
                        roomList: [
                            { roomId: 10, roomName: "238" },
                            { roomId: 11, roomName: "239" },
                            { roomId: 12, roomName: "230" },
                            { roomId: 13, roomName: "231" },
                            { roomId: 14, roomName: "232" },
                            { roomId: 15, roomName: "233" },
                            { roomId: 16, roomName: "234" },
                        ]
                    }
                ],
                orderList: [
                    {
                        otaType: "美团酒店",
                        guestNmae: "张三",
                        roomId: 1,
                        phone: "13800138000",
                        night: "1",
                        priceTotal: "168.00",
                        collection: "10.00",    //已收款
                        orderNum: "98665008922331795456",
                        inDate: "2022-06-18",
                        outDate: "2022-06-30",
                        type: '已预订',
                        remarks: "备注",
                        payStatus: "1"
                    }
                ],
                roomPriceList: []
            },
            methods: {
                // 鼠标放上单元格时显示交叉线
                cellMouseEnterMethod(row, column, cell) {
                    let idx = Number($(cell).parent().children("td").eq(0).attr("rowspan")) > 1 ? $(cell).index() - 1 : $(cell).index()
                    // 获取表格的滚动偏移量
                    let table = this.$refs.elTable.bodyWrapper;
                    let scrollTop = table.scrollTop;
                    let scrollLeft = table.scrollLeft;
                    // 清除高亮单元格
                    let highlineCell = document.getElementsByClassName('highline-cell')[0];
                    if (highlineCell) {
                        highlineCell.classList.remove("highline-cell");
                    }
                    // 添加单元格高亮
                    cell.classList.add("highline-cell");
                    // 显示房态数据
                    $(cell).find(".week-price-data").show();
                    if (idx == 0 || idx == -1) { return; }
                    // 获取X/Y轴
                    let xAxis = document.getElementById("xAxis");
                    let yAxis = document.getElementById("yAxis");

                    let xRect = xAxis.getBoundingClientRect();
                    let yRect = yAxis.getBoundingClientRect();
                    let cellRect = cell.getBoundingClientRect();
                    // 设置X轴高度，Y轴宽度
                    xAxis.style.height = cellRect.height + 'px';
                    xAxis.style.width = $("#roomType").width() - $(".el-table__fixed").outerWidth() - "14" + 'px';
                    yAxis.style.width = cellRect.width + 'px';
                    yAxis.style.height = $("#roomType").height() - "14" + 'px';
                    $(xAxis).css("border", "1px solid rgb(213, 217, 227)")
                    $(yAxis).css("border", "1px solid rgb(213, 217, 227)")
                    // 设置X/Y轴位置
                    xAxis.style.top = (cellRect.top - xRect.top) + 'px';
                    xAxis.style.left = ($(".el-table__fixed").outerWidth() + 17) + 'px';
                    yAxis.style.left = (cellRect.left) + 'px';
                    // 记录XY轴位置，用于设置XY轴随滚动条移动
                    this.xAxisTop = cellRect.top - xRect.top + scrollTop;
                    this.yAxisLeft = cellRect.left - yRect.left + scrollLeft;
                },
                setTableConfig() {
                    let timeThArr = WebUtil.getMonthList(new Date());
                    // 初始化数据列表默认为空；
                    this.tableData = [];

                    // 插入日期数据
                    this.timeThArr = [];
                    this.roomPriceList = [];
                    for (let k = 0; k < timeThArr.length; k++) {
                        const time = timeThArr[k];
                        this.timeThArr.push({ date: time })
                        this.roomPriceList.push({
                            date: time,
                            surplus: "22",
                            roomTypeId: "1",
                            roomPrice: "100.25",
                            roomId: "1",
                            roomName: "247",
                        })
                    }

                    //循环插入每行数据
                    for (let i = 0; i < this.roomEnum.length; i++) {
                        const element = this.roomEnum[i];
                        //如果没有房价数据，则只插入房价
                        if (element.roomList.length == 0) {
                            this.tableData.push({
                                roomTypeName: element.roomTypeName,
                                roomTypeId: element.roomTypeId,
                                rowSpan: 1,
                            })
                        }
                        // 循环房间列表插入房间数据和房价数据
                        for (let j = 0; j < element.roomList.length; j++) {
                            const room = element.roomList[j];
                            //当前行对象
                            let dataObj = {}
                            dataObj.roomTypeName = element.roomTypeName;
                            dataObj.roomTypeId = element.roomTypeId;
                            dataObj.roomName = room.roomName;
                            dataObj.roomId = room.roomId;
                            // 判断合并房间类型数据行
                            if ((!this.roomEnum[i - 1] || element.roomTypeId != this.roomEnum[i - 1].roomTypeId) && j == 0) {
                                dataObj.rowSpan = element.roomList.length
                            } else {
                                dataObj.rowSpan = 0
                            }
                            // 当前房间的每日房价
                            let priceList = this.roomPriceList.filter(item => item.roomId == room.roomId);
                            // 循环前端生成的每日日期，将日期相同的房价数据和剩余房间数量插入到当前行
                            for (let k = 0; k < this.timeThArr.length; k++) {
                                const time = this.timeThArr[k];
                                // 日期字段默认为空
                                dataObj[time.date] = {};
                                //判断相同日期的房价数据
                                let price = priceList.filter(item => item.date == time.date);
                                //如果存在当前循环的日期，则将房态数据插入到当前行，如果当天没有房价数据，则默认为空
                                if (price.length) {
                                    // 插入房态名称
                                    price[0].roomTypeName = dataObj.roomTypeName;
                                    // 插入房态数量
                                    dataObj[time.date].price = price[0];
                                    // 插入剩余间数
                                    time.surplus = price[0].surplus
                                } else {
                                    dataObj[time.date].price = {}
                                }

                                // 循环插入宾客信息
                                // let guest = this.orderList.filter(item => item.inDate == time.date && item.roomId == dataObj.roomId);
                                // if (guest.length > 0) {
                                //     dataObj[time.date].guest = guest[0]
                                // } else {
                                //     dataObj[time.date].guest = {};
                                // }
                            }
                            this.tableData.push(dataObj)
                        }
                    }
                },
                //更改表格表头行高
                headerCellStyle(scope) {
                    let style = {
                        backgroundColor: "#fff"
                    }
                    if (scope.rowIndex == 1) {
                        style.padding = "4.5px 0px";
                    }
                    return style
                },
                // 鼠标移出单元格事件
                cellMouseLeaveMethod(row, column, cell, event) {
                    this.dom = this.$refs.elTable.bodyWrapper
                    // 滚动屏幕时移除交叉线
                    this.dom.addEventListener('scroll', () => {
                        // 获取X/Y轴
                        this.removeOverlapping(cell);
                    })
                    this.removeOverlapping(cell);
                },
                // 移除交叉线和隐藏房态数据
                removeOverlapping(cell) {
                    let xAxis = document.getElementById("xAxis");
                    let yAxis = document.getElementById("yAxis");

                    // 重置X/Y轴位置
                    xAxis.style.top = 0;
                    yAxis.style.left = 0;
                    xAxis.style.height = 0;
                    yAxis.style.width = 0;
                    $(xAxis).css("border", "none")
                    $(yAxis).css("border", "none")
                    $(".highline-cell").removeClass("highline-cell")
                    $(cell).find(".week-price-data").hide();
                },
                //合并表格列
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex === 0) {
                        return {
                            rowspan: row.rowSpan,
                            colspan: 1
                        };
                    }
                },
                // 自定义单元格class
                cellClassNameMethod({ row, column, rowIndex, columnIndex }) {
                    let className = "";
                    if (this.timeThArr[columnIndex - 2]) { className += "date-" + this.timeThArr[columnIndex - 2].date }
                    className += " roomId-" + row.roomId;
                    if (columnIndex != 0 && columnIndex != 1) { className += " comu-td"; }
                    className += " rowIndex-" + rowIndex;
                    return className;
                },
                // 设置订单信息到表格里
                setOrderToDom() {
                    // 首先移除所有订单信息
                    $(".week-gutes-data").remove()
                    setTimeout(() => {
                        for (let i = 0; i < this.orderList.length; i++) {
                            let tdDom = $(".el-table__body-wrapper .date-" + this.orderList[i].inDate + ".roomId-" + this.orderList[i].roomId);
                            // 订单信息
                            let html = `
                                        <div class=" cup tx-12 week-gutes-data date-${this.orderList[i].inDate} roomId-${this.orderList[i].roomId} order-info">
                                            <div style="background-color: rgb(255, 212, 179) !important;height:100%" class='order-info'>
                                                <div class="ub ub-ac ub-sb order-info" >
                                                    <p class="le-14 order-info">${this.orderList[i].guestNmae}</p>
                                                    <div style="width: 21px;height: 21px;line-height: 21px;transform: scale(0.7);display:${this.orderList[i].payStatus ? 'block' : 'none'}" class="tx-c bgc-re tx-wh order-info" >
                                                        欠
                                                    </div>
                                                </div>
                                                <p class="le-14 mt-3 order-info">●${this.orderList[i].otaType}</p>
                                            </div>
                                        </div>
                                    `
                            // 将订单信息插入到表格里
                            $(".el-table__body-wrapper").append(html);
                            // 获取订单信息dom
                            let orderDom = $(".week-gutes-data.date-" + this.orderList[i].inDate + ".roomId-" + this.orderList[i].roomId);
                            // 设置dom位置和宽度高度
                            let DomLength = WebUtil.DateDiff(this.orderList[i].inDate, this.orderList[i].outDate);
                            orderDom.css("left", tdDom.offset().left - orderDom.offset().left);
                            orderDom.css("top", tdDom.offset().top - orderDom.offset().top);
                            orderDom.css('width', (tdDom.width() + 2) * DomLength);
                            orderDom.css('height', tdDom.height() + 2);
                        }
                    }, 200);
                },
                removeBookRoomDom(i, date) {
                    $(".BookRoom.date-" + date + ".roomId-" + this.tableData[i].roomId).remove();
                },
                //添加预订框
                handleClickTimeData(i, date) {
                    // 获取订单信息dom
                    let BookRoomDom = $(".BookRoom.date-" + date + ".roomId-" + this.tableData[i].roomId);
                    let tdDom = $(".el-table__body-wrapper  .date-" + date + ".roomId-" + this.tableData[i].roomId);
                    // 预订box
                    let html = `<div class="BookRoom date-${date} roomId-${this.tableData[i].roomId}"><div class="BookRoom-content cup tx-12 "><i class="el-icon-check"></i></div></div>`
                    // 将订单信息插入到表格里
                    $(".el-table__body-wrapper").append(html)
                    // 获取预订dom
                    BookRoomDom = $(".BookRoom.date-" + date + ".roomId-" + this.tableData[i].roomId);
                    // 设置dom位置和宽度高度
                    BookRoomDom.css("left", tdDom.offset().left - BookRoomDom.offset().left);
                    BookRoomDom.css("top", tdDom.offset().top - BookRoomDom.offset().top);
                    BookRoomDom.css('width', tdDom.width() + 2);
                    BookRoomDom.css('height', tdDom.height() + 2);


                },
                // 表格框选事件
                boxSelection() {
                    let that = this;
                    (function () {
                        document.onmousedown = function (e) {
                            var selList = $(".comu-td:not(.is-hidden)");
                            var downSelList = [];
                            var isSelect = true;
                            // 获取事件触发后的event对象，做了一个兼容性处理
                            var evt = window.event || arguments[0];
                            // 存放鼠标点击初始位置
                            var startX = (evt.x || evt.clientX);
                            var startY = (evt.y || evt.clientY);

                            // 创建一个框选元素
                            var selDiv = document.createElement("div");
                            // 给框选元素添加CSS样式，使用决定定位
                            selDiv.style.cssText = "position:absolute; width:0px; height:0px; font-size:0px; margin:0px; padding:0px; border:1px dashed #0099FF; z-index:1000; filter:alpha(opacity:60); opacity:0; display:none";
                            // 添加ID
                            selDiv.id = "selectDiv";
                            // appendChild()向节点添加最后一个子节点
                            $(document.body).append(selDiv)
                            // 根据起始位置，添加定位
                            selDiv.style.left = startX + "px";
                            selDiv.style.top = startY + "px";
                            // 根据坐标给选框修改样式
                            var _x = null;
                            var _y = null;

                            function addRoomBook() {
                                if ($(e.target).hasClass('book-td')) {
                                    if (isSelect) {
                                        if (selDiv.style.display == "none") {
                                            selDiv.style.display = "";
                                        }
                                        // 获取当前鼠标位置
                                        _x = (evt.x || evt.clientX);
                                        _y = (evt.y || evt.clientY);
                                        selDiv.style.left = Math.min(_x, startX) + 'px';
                                        selDiv.style.top = Math.min(_y, startY) + 'px';
                                        selDiv.style.width = Math.abs(_x - startX) + 'px';  //Math.abs()返回数的绝对值
                                        selDiv.style.height = Math.abs(_y - startY) + 'px';
                                        // *******************************************************************************
                                        // 获取参数
                                        var _l = selDiv.offsetLeft;
                                        var _t = selDiv.offsetTop;
                                        var _w = selDiv.offsetWidth;
                                        var _h = selDiv.offsetHeight;
                                        for (var i = 0; i < selList.length; i++) {
                                            let rect = selList[i].getBoundingClientRect()
                                            var sl = rect.width + rect.left;
                                            var st = rect.height + rect.top;

                                            let rowIdx = 0;
                                            let date = "";
                                            let classList = Array.from(selList[i].classList)
                                            for (let i = 0; i < classList.length; i++) {
                                                const className = classList[i];
                                                if (className.indexOf("rowIndex") != -1) { rowIdx = className.replace("rowIndex-", "") }
                                                if (className.indexOf("date-") != -1) { date = className.replace("date-", "") }
                                            }
                                            if (sl > _l && rect.left < _l + _w && rect.top < _t + _h && st > _t) {
                                                // 该DOM元素被选中，进行处理
                                                if (selList[i].className.indexOf(" selected") == -1) {
                                                    selList[i].className = selList[i].className + " selected";
                                                    console.log(1);
                                                    that.handleClickTimeData(rowIdx, date)
                                                    downSelList.push(selList[i])
                                                }
                                            } else {
                                                if (selList[i].className.indexOf(" selected") != -1) {
                                                    for (let j = 0; j < downSelList.length; j++) {
                                                        const element = downSelList[j];
                                                        if (element == selList[i]) {
                                                            $(selList[i]).removeClass("selected");
                                                            that.removeBookRoomDom(rowIdx, date);
                                                            downSelList.splice(i, 1)
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            addRoomBook();
                            clearEventBubble(evt);
                            document.onmousemove = function () {
                                evt = window.event || arguments[0];
                                // 移动鼠标时隐藏交叉线
                                $("#xAxis").hide();
                                $("#yAxis").hide();
                                addRoomBook();
                                clearEventBubble(evt);
                            }

                            // 放开鼠标，选框消失
                            document.onmouseup = function (e) {
                                isSelect = false;
                                if (selDiv) {
                                    $("#selectDiv").remove();
                                }
                                // 放开鼠标时显示交叉线
                                $("#xAxis").show();
                                $("#yAxis").show();
                                $("#my-popper").show();
                                // 计算离鼠标最近的预订框，并将popper选项位置依附在预订框上
                                startX = (evt.x || evt.clientX);
                                startY = (evt.y || evt.clientY);
                                for (let i = 0; i < $(".BookRoom").length; i++) {
                                    const element = $(".BookRoom")[i];
                                    let rect = element.getBoundingClientRect()
                                    let sl = rect.width + rect.left;
                                    let st = rect.height + rect.top;
                                    if (startX > rect.left && startX < sl && startY > rect.top && startY < st) {
                                        let option = ['预订', '关房', '取消']
                                        that.myPopper(element, option, $(".el-table__body-wrapper"))
                                        // Popper按钮事件
                                        $("#my-popper-3").off();
                                        $(document).on("click", "#my-popper-2", function () {
                                            $("#my-popper").remove();
                                            $(".BookRoom").remove();
                                            $(".selected").removeClass("selected")
                                        })
                                        break;
                                    }
                                }
                                selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
                            }
                        }
                    })();

                    function clearEventBubble(evt) {
                        // stopPropagation()不再派发事件。终止事件在传播过程的捕获、目标处理或起跑阶段进一步传播
                        if (evt.stopPropagation)
                            evt.stopPropagation();
                        else
                            evt.cancelBubble = true;  // 阻止该事件的进一步冒泡
                        if (evt.preventDefault)
                            evt.preventDefault();   // 取消事件的默认动作
                        else
                            evt.returnValue = false;
                    }
                },
            },

            mounted() {
                this.setTableConfig();
                this.setOrderToDom();
                // this.boxSelection();
                // return
                setTimeout(() => {
                    WebUtil.abc({
                        box: $(".el-table__body-wrapper"),  //在什么元素内
                        el: $(".comu-td:not(.is-hidden)"),  //包含集合
                        appointClass: "book-td",    //指定获取什么元素
                        move: (doms, t) => {
                            let rowIdx = 0;
                            let date = "";
                            let classList = Array.from(doms.classList)
                            for (let i = 0; i < classList.length; i++) {
                                const className = classList[i];
                                if (className.indexOf("rowIndex") != -1) { rowIdx = className.replace("rowIndex-", "") }
                                if (className.indexOf("date-") != -1) { date = className.replace("date-", "") }
                            }
                            if (t == 1) {
                                this.handleClickTimeData(rowIdx, date)
                            }
                            if (t == 2) {
                                this.removeBookRoomDom(rowIdx, date);
                            }
                        },
                        up: (e) => {
                            $("#xAxis").show();
                            $("#yAxis").show();
                            // 计算离鼠标最近的预订框，并将popper选项位置依附在预订框上

                            let element = $(".BookRoom").last();
                            let option = ['预订', '关房', '取消']
                            this.myPopper(element, option, $(".el-table__body-wrapper"))
                            console.log(e.target);
                            // Popper按钮事件
                            $(document).on("click", "#my-popper-2", function () {
                                $("#my-popper").remove();
                                $(".BookRoom").remove();
                                $(".selected").removeClass("selected")
                            })

                        }
                    })
                }, 200);
            }
        })
    </script>

</body>

</html>